<script setup>
import { ref, getCurrentInstance, reactive, computed, nextTick } from "vue";
import { useRouter } from "vue-router";

import moment from "moment";
import { Search, Refresh, Delete } from "@element-plus/icons-vue";

import api from "@/api";

import hzIcon from "@/assets/images/project/hz.png";
import sbqIcon from "@/assets/images/project/sbq.png";
import areaIcon from "@/assets/images/project/area.png";
import aqqIcon from "@/assets/images/project/aqq.png";

const { proxy } = getCurrentInstance();

const router = useRouter();

const safe = reactive({
  tabs: [
    {
      name: "危险区",
      icon: sbqIcon,
      value: 0,
      algorithmType: "1",
    },
    {
      name: "识别区",
      icon: aqqIcon,
      value: 0,
      algorithmType: "0",
    },
    // {
    //   name: "作业面",
    //   icon: areaIcon,
    //   value: 0,
    //   algorithmType: "2",
    // },
    {
      name: "火灾烟雾区",
      icon: hzIcon,
      value: 0,
      algorithmType: "3",
    },
  ],
  active: -1,
  form: {
    deviceId: "",
    startDate: "",
    endDate: "",
    riskLevel: "",
    algorithmType: "",
    eventType: "",
  },
  monthTotal: 0,
  total: 0,
  danger: 0,
  resType: true,
  list: [],
  times: "",
  statisticUrl: "",
  topLoad: true,
  botLoad: false,
  previewEvent: {},
  previewActive: 0,
  isDeleting: false,
  deleteWord: "删除",
  deleteList: [],
  deleteDialogVisible: false,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 9,
  total: 1,
  currentVideoList: [],
});

const infoOpts = ref([
  {
    label: "全部",
    value: "",
  },
])

const etypeOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "识别区内未佩戴安全帽",
    value: "safety_equipment_with_area",
  },
  {
    label: "识别区外未佩戴安全帽",
    value: "safety_equipment_without_area",
  },
  {
    label: "闯入危险区",
    value: "safety_area_with_area",
  },
  {
    label: "未佩戴安全帽闯入危险区域",
    value: "safety_area_without_area",
  },
  {
    label: "火灾隐患事件",
    value: "fire_smoke_alarm",
  },
];

const stypeOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "危险区",
    value: "1",
  },
  {
    label: "识别区",
    value: "0",
  },
  // {
  //   label: "作业面",
  //   value: "2",
  // },
  {
    label: "火灾烟雾区",
    value: "3",
  },
];

const levelOpts = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "低危",
    value: "low",
  },
  {
    label: "高危",
    value: "high",
  },
];

if (proxy._GLOBAL.DEVICEINFO.length === 0) {
  api.homepage.getHomePageDevicesImpl().then((res) => {
    if (res.deviceInfos) {
      proxy._GLOBAL.DEVICEINFO = res.deviceInfos;
      sessionStorage.setItem("device", res.deviceInfos);
      proxy._GLOBAL.DEVICEINFO.forEach((item) => {
        infoOpts.value.push({
          label: item.deviceInfo,
          value: item.deviceId,
        });
      });
    }

  });
} else {
  proxy._GLOBAL.DEVICEINFO.forEach((item) => {
    infoOpts.value.push({
      label: item.deviceInfo,
      value: item.deviceId,
    });
  });
}


//获取统计信息
const getSafetyInfoData = function () {
  api.safety
    .getSafetyInfoByDuration({
      startDate: moment().format("YYYY-MM-01"),
      endDate: moment().add(1, "days").format("YYYY-MM-DD"),
      algorithmType: "safety",
    })
    .then((res) => {
      if (res) {
        safe.topLoad = false;
        let total = 0;
        console.log(res.data);
        console.log("total", res.data.length);
        res.data.forEach((item) => {
          if (item.algorithmType === 0) {
            total += safe.tabs[1].value =
              item.highRiskLevelCount + item.lowRiskLevelCount;
          } else if (item.algorithmType === 1) {
            total += safe.tabs[0].value =
              item.highRiskLevelCount + item.lowRiskLevelCount;
          } else if (item.algorithmType === 2) {
            total += safe.tabs[2].value =
              item.highRiskLevelCount + item.lowRiskLevelCount;
          } else if (item.algorithmType === 3) {
            total += safe.tabs[3].value =
              item.highRiskLevelCount + item.lowRiskLevelCount;
          }
        });
        safe.monthTotal = total;
      }
    });
};

getSafetyInfoData();

const getDeviceName = computed(() => (item) => {
  let name = "";
  for (let i = 0, l = proxy._GLOBAL.DEVICEINFO.length; i < l; i++) {
    if (item === proxy._GLOBAL.DEVICEINFO[i].deviceId) {
      name = proxy._GLOBAL.DEVICEINFO[i].deviceInfo;
      break;
    }
  }
  return name;
});

const getEtype = computed(() => (item) => {
  return item === "safety_equipment_with_area"
    ? "识别区内未佩戴安全帽"
    : item === "safety_equipment_without_area"
      ? "识别区外未佩戴安全帽"
      : item === "safety_area_with_area"
        ? "闯入危险区"
        : item === "safety_area_without_area"
          ? "未佩戴安全帽闯入危险区域"
          : item === "fire_smoke_alarm"
            ? "火灾隐患事件"
            : "--";
});

//获取列表数据
const getSafetyData = function (type) {
  safe.botLoad = true;
  api.safety.getSafetyViolationByDuration(safe.form).then((res) => {
    if (res) {
      safe.botLoad = false;
      safe.statisticUrl = res.statisticUrl;
      safe.list = res.data;
      if (safe.list.length >= 2) {
        if (
          new Date(safe.list[0].startTime).getTime() <
          new Date(safe.list[1].startTime).getTime()
        ) {
          safe.list.reverse();
        }
      }
      safe.list.map((item) => {
        item.isSelected = false;
        return item;
      });
      pagination.total = safe.list.length;
      pagination.currentVideoList = safe.list.slice(0, pagination.pageSize);
      console.log(pagination.currentVideoList);
      // console.log(safe.list);
      //统计总体事件和高危事件
      safe.total = res.data.length;
      safe.danger = 0;
      res.data.forEach((item) => {
        if (item.riskLevel === "high") {
          safe.danger++;
        }
      });

      //如果是列表状态，右侧预览详情同步调整
      if (!safe.resType) {
        safe.previewActive = 0;
        //判断是否有数据
        if (safe.list.length > 0) {
          safe.previewEvent = safe.list[0];
        } else {
          safe.previewEvent = {};
        }
      }
    }
  });
};

getSafetyData();

const itemHandleClick = function (item, index) {
  if (safe.active === index) {
    safe.active = -1;
    safe.form.algorithmType = "";
    safe.form.startDate = "";
    safe.form.endDate = "";
    safe.times = "";
  } else {
    safe.active = index;
    safe.form.algorithmType = item.algorithmType;
    safe.form.startDate = moment().format("YYYY-MM-01");
    safe.form.endDate = moment().format("YYYY-MM-DD");
    safe.times = [moment().format("YYYY-MM-01"), moment().format("YYYY-MM-DD")];
  }

  getSafetyData("click");
  // safe.list.reverse()
};

const getLevel = computed(() => (item) => {
  return item === "low"
    ? {
      cls: "yellow",
      value: "低危",
    }
    : item === "high"
      ? {
        cls: "red",
        value: "高危",
      }
      : {
        cls: "nomal",
        value: "--",
      };
});

const handlePageChange = function (pageNumber) {
  console.log(pageNumber);
  pagination.currentPage = pageNumber;
  pagination.currentVideoList = safe.list.slice(
    (pageNumber - 1) * pagination.pageSize,
    pageNumber * pagination.pageSize
  );
};

const erightHandleClick = function (flag) {
  safe.resType = flag;
  safe.previewEvent = {};
  if (!flag && safe.list[0]) {
    safe.previewEvent = safe.list[0];
    safe.previewActive = 0
  }
};

const previewHandleClick = function (item, index) {
  if (index === safe.previewActive) return;
  safe.previewActive = index;
  safe.previewEvent = item;
};

const onSubmit = function () {
  getSafetyData();
};

const onReset = function () {
  safe.form.deviceId = "";
  safe.form.startDate = "";
  safe.form.endDate = "";
  safe.form.riskLevel = "";
  safe.form.algorithmType = "";
  safe.form.eventType = "";
  safe.active = -1;
  safe.times = "";
  getSafetyData();
};

const onDelete = function () {
  safe.isDeleting = !safe.isDeleting;
  if (safe.isDeleting) {
    safe.deleteWord = "取消";
  } else {
    safe.deleteList = [];
    safe.deleteWord = "删除";
  }
};

const onConfirmDelete = function () {
  console.log(safe.deleteList);
  safe.deleteDialogVisible = true;
};

const onCancelDeleteButton = function () {
  safe.deleteDialogVisible = false;
};

const onConfirmDeleteButton = function () {
  let deleteData = [];
  for (let i = 0; i < safe.deleteList.length; i++) {
    deleteData.push(safe.list[safe.deleteList[i]].url);
  }
  safe.deleteDialogVisible = false;
  let formData = {
    urlList: deleteData,
    type: "safety",
    datatype: "array",
  };
  console.log("here?");
  api.safety.deleteSafetyViolation(formData).then((res) => {
    console.log(res.data);
    if (res) {
      getSafetyData();
      getSafetyInfoData();
      safe.isDeleting = false;
      safe.deleteList = []
      safe.deleteWord = "删除"
    }
  });
};

const onDeleteButtonClick = function (item, index) {
  let realIndex = (pagination.currentPage - 1) * pagination.pageSize + index;
  if (safe.isDeleting) {
    if (!pagination.currentVideoList[index].isSelected) {
      pagination.currentVideoList[index].isSelected = true;
      safe.list[realIndex].isSelected = true;
    } else {
      pagination.currentVideoList[index].isSelected = false;
      safe.list[realIndex].isSelected = false;
    }

    if (safe.deleteList.includes(realIndex)) {
      safe.deleteList.splice(safe.deleteList.indexOf(realIndex), 1);
    } else {
      safe.deleteList.push(realIndex);
    }
  }
};

const dateChangeHandleClick = function (date) {
  if (date === null) {
    safe.form.startDate = "";
    safe.form.endDate = "";
  } else {
    safe.form.startDate = moment(date[0]).format("YYYY-MM-DD");
    safe.form.endDate = moment(date[1]).format("YYYY-MM-DD");
  }
};

const expectTimeClick = function () {
  safe.form.deviceId = "";
  safe.form.startDate = moment().format("YYYY-MM-01");
  safe.form.endDate = moment().format("YYYY-MM-DD");
  safe.form.riskLevel = "";
  safe.form.algorithmType = "";
  safe.form.eventType = "";
  safe.active = -1;
  safe.times = [moment().format("YYYY-MM-01"), moment().format("YYYY-MM-DD")];
  getSafetyData();
};

window.videoError = function (e) {
  e.target.nextSibling.style.display = "block";
  e.target.remove();
};
window.videoSuccess = function (e) {
  e.target.nextSibling.remove();
};
</script>

<template>
  <div class="safety-container">
    <div class="tabs" v-loading="safe.topLoad">
      <div class="currentTotal">
        <i></i>
        <div class="desc">
          <span class="desc-top">本月统计</span>
          <div class="desc-btm" @click="expectTimeClick">
            <span>{{ moment().format("YYYY-MM-01") }}</span>
            <span>{{ moment().format("YYYY-MM-DD") }}</span>
          </div>
          <div class="value">{{ safe.monthTotal }}</div>
        </div>
      </div>
      <div class="tab-item" :class="index === safe.active ? 'active' : ''" v-for="(item, index) in safe.tabs" :key="index"
        @click="itemHandleClick(item, index)">
        <img :src="item.icon" />
        <div class="desc">
          <span class="desc-top">{{ item.name }}</span>
          <!-- <span class="desc-btm">{{ expectTime }}</span> -->
        </div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>

    <div class="toolbar">
      <el-form :model="safe.form" label-width="80px">
        <el-form-item label="起止时间">
          <el-date-picker size="small" v-model="safe.times" type="daterange" range-separator="一" start-placeholder="开始时间"
            end-placeholder="结束时间" @change="dateChangeHandleClick" />
        </el-form-item>

        <el-form-item label="设备信息">
          <el-select size="small" v-model="safe.form.deviceId" placeholder="请选择">
            <el-option v-for="item in infoOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="危险等级">
          <el-select size="small" v-model="safe.form.riskLevel" placeholder="请选择">
            <el-option v-for="item in levelOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="事件类型">
          <el-select size="small" v-model="safe.form.eventType" placeholder="请选择">
            <el-option v-for="item in etypeOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="设备类型">
          <el-select size="small" v-model="safe.form.algorithmType" placeholder="请选择">
            <el-option v-for="item in stypeOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button :icon="Search" size="small" type="primary" @click="onSubmit" color="#8F93F7"
            style="color: #ffffff">搜索</el-button>
          <el-button color="#FFFFFF" :icon="Refresh" size="small" type="primary" @click="onReset">重置</el-button>
          <el-button size="small" color="#8F93F7" type="primary" style="color: #ffffff" @click="onDelete">
            {{ safe.deleteWord }}
          </el-button>
          <el-button size="small" color="#8F93F7" type="primary" style="color: #ffffff" v-if="safe.isDeleting"
            @click="onConfirmDelete">
            确认删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="event-num">
      <div class="e-left">
        <div class="total">
          <span>总体事件：</span>
          <span class="value">{{ safe.total }}</span>
          <font>件</font>
        </div>
        <div class="danger">
          <span>高危事件：</span>
          <span class="value">{{ safe.danger }}</span>
          <font>件</font>
        </div>
      </div>
      <div class="e-right">
        <i :class="safe.resType ? 'active' : ''" class="block-btn" @click="erightHandleClick(true)"></i>
        <i :class="!safe.resType ? 'active' : ''" class="table-btn" @click="erightHandleClick(false)"></i>
      </div>
    </div>
    <div v-if="safe.list.length === 0" class="nodata">
      <el-alert title="暂无数据!" type="warning" show-icon :closable="false" />
    </div>
    <div v-else>
      <div class="res-block" v-if="safe.resType" v-loading="safe.botLoad">
        <div class="res-block-item" v-for="(item, index) in pagination.currentVideoList"
          :class="pagination.currentVideoList[index].isSelected ? 'active' : ''" :key="index">
          <div class="res-block-item-top">
            <div class="title">{{ getEtype(item.eventType) }}</div>
            <div class="level" :class="getLevel(item.riskLevel).cls">
              {{ getLevel(item.riskLevel).value }}
            </div>
          </div>
          <div class="res-block-item-mid" :key="item.url">
            <video crossorigin="anonymous" controls loop muted>
              <source :src="safe.statisticUrl + item.url" type="video/mp4" />
            </video>
          </div>
          <div class="res-block-item-btm">
            <div class="name">{{ getDeviceName(item.deviceId) }}</div>
            <div class="code">
              <span class="name">设备编号：</span>
              <span class="value">{{ item.deviceId }}</span>
            </div>
            <div class="time">
              <span class="name">发生时间：</span>
              <span class="value">{{
                moment(item.startTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <el-button v-if="safe.isDeleting" type="danger" :icon="Delete" circle
              style="margin-left: 95%; background: #fc0000; cursor: pointer" @click="onDeleteButtonClick(item, index)" />
          </div>
        </div>
      </div>
      <div class="res-table" v-else>
        <div class="res-table-l">
          <div class="res-table-header">
            <div class="t-header-index">序号</div>
            <div class="t-header-thumb">视频</div>
            <div class="t-header-etype">事件类型</div>
            <div class="t-header-stype">设备类型</div>
            <div class="t-header-time">发生时间</div>
            <div class="t-header-level">等级</div>
          </div>
          <div class="res-table-body">
            <div class="res-table-item" :class="safe.previewActive === index ? 'active' : ''"
              v-for="(item, index) in pagination.currentVideoList" :key="index" @click="previewHandleClick(item, index)">
              <div class="t-body-index">{{ index + 1 }}</div>
              <div class="t-body-thumb" :key="item.url">
                <video :src="safe.statisticUrl + item.url" onerror="window.videoError(event)"
                  onloadeddata="window.videoSuccess(event)" crossorigin="anonymous" :autoplay="false" muted></video>
                <div class="video-error" style="display: none"></div>
              </div>
              <div class="t-body-etype">{{ getEtype(item.eventType) }}</div>
              <div class="t-body-stype">{{ getDeviceName(item.deviceId) }}</div>
              <div class="t-body-time">
                {{ moment(item.startTime).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
              <div class="t-body-level">
                <span :class="getLevel(item.riskLevel).cls">{{
                  getLevel(item.riskLevel).value
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="res-table-r">
          <div class="res-preview">
            <div class="res-preview-top">
              <div class="title">
                {{ getDeviceName(safe.previewEvent.deviceId) }}
              </div>
            </div>
            <div class="res-preview-mid" :key="safe.previewEvent.url">
              <video crossorigin="anonymous" controls loop muted>
                <source :src="safe.statisticUrl + safe.previewEvent.url" type="video/mp4" />
              </video>
            </div>
            <div class="res-preview-btm">
              <div class="time">
                <span class="name">发生时间：</span>
                <span class="value">{{
                  moment(safe.previewEvent.startTime).format(
                    "YYYY-MM-DD HH:mm:ss"
                  )
                }}</span>
              </div>
              <div class="name">
                <span class="name">描述：</span>
                <span class="value">{{
                  getEtype(safe.previewEvent.eventType)
                }}</span>
              </div>
              <div class="level" :class="getLevel(safe.previewEvent.riskLevel).cls">
                <span class="name">等级：</span>
                <span class="value">{{
                  getLevel(safe.previewEvent.riskLevel).value
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="safe.list.length"
          layout="prev,pager,next" background @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog v-model="safe.deleteDialogVisible" title="确认删除？" width="30%">
      <span>即将删除{{ safe.deleteList.length }}条安全事件，是否确认？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="safe.deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onConfirmDeleteButton">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.safety-container {
  width: 100%;
  height: calc(100vh - 85px);
  font-family: SourceHanSansSC;
  position: relative;

  .tabs {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    color: #ffffff;
    margin-top: 10px;

    .currentTotal {
      width: 20%;
      height: 56px;
      color: #656565;
      display: flex;
      margin-left: 20px;

      i {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/project/total.png");
        margin-top: 5px;
        margin-right: 10px;
      }

      .desc {
        width: 80%;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        box-sizing: border-box;
        align-items: center;

        .desc-top {
          display: block;
          font-weight: bold;
          color: #6e91fb;
          font-size: 18px;
        }

        .desc-btm {
          width: 110px;
          font-size: 12px;
          cursor: pointer;

          span {
            display: block;
          }
        }

        .value {
          font-size: 30px;
          font-weight: bold;
          color: #6e91fb;
        }
      }
    }

    .tab-item {
      width: 23%;
      height: 56px;
      background: #6e91fb;
      border-radius: 8px;
      cursor: pointer;

      img {
        width: 24px;
        height: 24px;
        float: left;
        margin: 15px 20px 0px 20px;
      }

      .desc {
        width: 45%;
        float: left;
        margin-top: 8px;
        line-height: 40px;

        .desc-top {
          display: block;
          font-size: 14px;
          font-weight: bold;
        }

        .desc-btm {
          font-size: 12px;
        }
      }

      .value {
        float: right;
        margin-right: 20px;
        line-height: 56px;
        font-size: 30px;
        font-weight: bold;
      }

      &.active {
        background: linear-gradient(0deg, #ea8d13, #f6c01b);
      }
    }
  }

  .toolbar {
    width: 100%;

    :deep .el-form {
      margin-left: 65px;

      .el-form-item {
        margin-left: 10px;
        float: left;
        margin-bottom: 10px;
      }

      .el-form-item__label {
        color: #656565;
      }
    }

    .btns {
      :deep .el-form-item__content {
        margin-left: 10px !important;
        margin-top: 4px;
      }
    }
  }

  .event-num {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    color: #656565;

    .e-left {
      width: 50%;
      height: 40px;
      overflow: hidden;
      margin-left: 67px;

      >div {
        float: left;
        margin-left: 20px;
      }

      .total {
        margin-right: 20px;

        .value {
          color: #8f93f7;
        }
      }

      .danger {
        .value {
          color: #ef624a;
        }
      }
    }

    .e-right {
      width: 50%;
      height: 40px;
      overflow: hidden;

      i {
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        float: right;
        margin-right: 15px;
        cursor: pointer;
      }

      .block-btn {
        background-image: url("@/assets/images/project/res-block.png");

        &.active {
          background-image: url("@/assets/images/project/res-block-active.png");
        }
      }

      .table-btn {
        background-image: url("@/assets/images/project/res-table.png");

        &.active {
          background-image: url("@/assets/images/project/res-table-active.png");
        }
      }
    }

    .value {
      font-size: 20px;
      padding: 0px 5px;
      font-weight: bold;
    }
  }

  .nodata {
    width: 200px;
    margin: auto;
  }

  .res-block {
    width: 100%;
    height: calc(100vh - 280px);
    margin: auto;
    overflow: auto;
    padding-bottom: 30px;
    box-sizing: border-box;

    .res-block-item {
      width: 30%;
      height: 350px;
      border: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 6px;
      background: #ffffff;
      float: left;
      overflow: hidden;
      margin: 8px 1.5%;

      .res-block-item-top {
        width: 92%;
        height: 40px;
        line-height: 30px;
        margin: auto;
        display: flex;
        justify-content: space-between;

        .title {
          width: 65%;
          height: 40px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("@/assets/images/project/res_title.png");
          margin-top: 5px;
          color: #656565;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 15px;
        }

        .yellow {
          background: linear-gradient(0deg, #ea8d13, #f6c01b);
        }

        .red {
          background: linear-gradient(0deg, #ea2d13, #f66d1b);
        }

        .level {
          height: 25px;
          width: 60px;
          line-height: 25px;
          text-align: center;
          font-size: 12px;
          font-weight: bold;
          border-radius: 4px;
          color: #ffffff;
          margin-top: 10px;
        }
      }

      .res-block-item-mid {
        width: 90%;
        height: 230px;
        margin: auto;

        video {
          width: 100%;
          height: 230px;
          object-fit: fill;
        }
      }

      .res-block-item-btm {
        width: 90%;
        margin: auto;
        overflow: hidden;
        color: #656565;
        font-size: 13px;

        >div {
          float: left;
          width: 50%;
          margin-top: 5px;
        }
      }

      &.active {
        background: #6e91fb;
      }
    }
  }

  .res-table {
    width: 100%;
    height: calc(100vh - 280px);
    margin: auto;
    overflow: hidden;
    padding: 0px 30px;
    box-sizing: border-box;
    padding-bottom: 30px;
    display: flex;
    color: #656565;
    justify-content: space-around;

    .res-table-l {
      width: calc(100% - 430px);

      .res-table-header {
        width: 100%;
        height: 40px;
        background: #ecedff;
        display: flex;
        justify-content: space-around;

        >div {
          width: 20%;
          text-align: center;
          line-height: 40px;
          font-weight: bold;
        }

        .t-header-index {
          width: 100px;
        }

        .t-header-level {
          width: 200px;
        }
      }

      .res-table-body {
        width: 100%;
        height: calc(100vh - 320px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 40px;
        box-sizing: border-box;

        .res-table-item {
          width: 100%;
          box-shadow: 0px 0px 4px 0px #eceefc;
          background: #ffffff;
          margin-top: 5px;
          border: 1px solid #eaf1fc;
          border-radius: 6px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          cursor: pointer;

          >div {
            width: 20%;
            text-align: center;
            padding: 5px 0px;
            font-size: 13px;
          }

          .t-body-index {
            width: 100px;
          }

          .t-body-level {
            width: 200px;

            span {
              padding: 5px 10px;
              opacity: 0.77;
              border-radius: 4px;
              color: #ffffff;
              font-size: 12px;
            }

            .yellow {
              background: linear-gradient(0deg, #ea8d13, #f6c01b);
            }

            .red {
              background: linear-gradient(0deg, #ea2d13, #f66d1b);
            }
          }

          video {
            width: 50px;
            height: 30px;
          }

          .video-error {
            margin: auto;
            width: 55px;
            height: 30px;
            background-repeat: no-repeat;
            background-size: 100% 90%;
            background-image: url("@/assets/images/project/thumb.png");
            background-position: center;
          }

          &.active {
            background: #998ef6;
            color: #ffffff;
          }
        }
      }
    }

    .res-table-r {
      width: 400px;
      height: 400px;
      border: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 6px;

      .res-preview {
        width: 95%;
        margin: auto;

        .res-preview-top {
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-indent: 5px;
        }

        .res-preview-mid {
          width: 100%;
          height: 240px;

          video {
            width: 100%;
            height: 100%;
            object-fit: fill;
          }
        }

        .res-preview-btm {
          width: 100%;
          font-size: 13px;
          text-indent: 10px;
          margin-top: 10px;

          >div {
            margin-bottom: 5px;
          }

          .yellow .value {
            color: #ea8d13;
          }

          .red .value {
            color: #ea2d13;
          }
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 5px 0px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0px;
    padding-bottom: 10px;
    background: #ffffff;
  }
}
</style>
